<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="~{theme/wuxia/common :: meta}"></div>
    <meta property="og:title" th:content="${'专辑详情 | ' + #servletContext.getAttribute('configMap')['blog_name']}" />
    <title>专辑详情 | [[${#servletContext.getAttribute('configMap')['blog_name']}]]</title>
    <div th:replace="~{theme/wuxia/common :: link}"></div>
</head>
<body>
<div class="wrap" id="wrap">

    <div class="cover">
        <img th:src="@{${prefix} + '/source/images/bg-01.jpg'}" alt="">
        <div class="fadeBottom"></div>
    </div>

    <div th:replace="~{theme/wuxia/common :: nav}"></div>

    <div class="main">
        <div class="album-content">
            <h2>
                <i class="fa fa-th"></i> 专辑详情
            </h2>

            <span style="display: inline-block; margin: .5rem 1rem; font-size: 14px">
                当前位置:
                <a data-pjax th:href="@{/}"><i class="fa fa-home"></i> 首页 </a>&nbsp;<i class="fa fa-angle-double-right"></i>&nbsp;
                <a data-pjax th:href="@{'/albums/'}"><i class="fa fa-th"></i> 专辑</a>&nbsp;<i class="fa fa-angle-double-right"></i>&nbsp;
                <span>【[[${album.name}]]】</span>
            </span>

            <div class="container">
                <div class="row" th:if="${album.detailType == 1}">
                    <div class="col-sm-6 col-md-4" th:each="detail,iterStat: ${pageInfo.data}">
                        <div class="album-detail-item animate-box" data-animate-effect="fadeIn">
                            <a class="fancybox" th:href="@{${detail.url}}" data-fancybox="gallery">
                                <img th:data-original="@{${detail.url}}" class="lazyload">
                                <div class="mask"><i class="fa fa-search-plus"></i></div>
                            </a>
                            <div class="name" th:text="${detail.name}" th:title="${detail.name}"></div>
                        </div>
                    </div>
                </div>
                <div class="row" th:if="${album.detailType == 2}">
                    <div class="col-sm-12 col-md-4" th:each="detail,iterStat: ${pageInfo.data}">
                        <div class="album-detail-item animate-box">
                            <a href="javascript:void(0)" th:data-url="${detail.url}" class="play-btn">
                                <img th:data-original="@{${detail.coverUrl}}" class="lazyload">
                                <div class="mask"><i class="fa fa-play"></i></div>
                            </a>
                            <div class="name" th:text="${detail.name}" th:title="${detail.name}"></div>
                        </div>
                    </div>
                </div>
                <div th:if="${pageInfo.total == 0}">
                    <div style="text-align:center;">
                        ~~暂无数据~~
                    </div>
                </div>

                <div class="pagination">
                    <span th:if="${pageInfo.hasPreviousPage}" class="page">
                        <a data-pjax class="prev page-numbers" th:href="@{${pageInfo.pageNum-1} == 1 ? '/albumDetail/' + ${album.id} + '/': '/albumDetail/' + ${album.id} + '/' + ${pageInfo.pageNum-1}+'/'}" ><i class="fa fa-angle-left"></i></a>
                    </span>
                    <span th:each="pageNum : ${pageInfo.navigatepageNums}" th:if="${pageInfo.navigatepageNums.length} le '4' ">
                        <span th:if="${pageNum == pageInfo.pageNum}"  class="page current" th:text="${pageNum}"></span>
                        <span class="page" th:if="${pageNum != pageInfo.pageNum}">
                            <a data-pjax th:href="@{${pageNum} == 1 ? '/albumDetail/' + ${album.id} + '/': '/albumDetail/' + ${album.id} + '/' + ${pageNum}+'/'}" th:text="${pageNum}"></a>
                        </span>
                    </span>
                    <span th:each="pageNum, iterStat : ${pageInfo.navigatepageNums}" th:if="${pageInfo.navigatepageNums.length} gt '4' ">
                           <span class="page" th:if="${pageNum == pageInfo.pageNum and iterStat.count gt 2 and iterStat.count le iterStat.size}">...</span>
                           <span th:if="${pageNum == pageInfo.pageNum}" class="page current" th:text="${pageNum}"></span>
                           <span class="page" th:if="${pageNum == pageInfo.pageNum and iterStat.count le (iterStat.size - 2)}">...</span>
                           <span th:if="${pageNum != pageInfo.pageNum}">
                               <span class="page" th:if="${iterStat.count == 1}" ><a data-pjax th:href="@{'/albumDetail/' + ${album.id} + '/1/'}" th:text="1"></a></span>
                               <span class="page" th:if="${iterStat.count == (iterStat.size)}"><a data-pjax th:href="@{'/albumDetail/' + ${album.id} + '/' +  ${pageNum} +'/'}" th:text="${pageNum}"></a></span>
                            </span>
                       </span>
                    <span th:if="${pageInfo.hasNextPage}" class="page">
                        <a data-pjax class="next page-numbers" th:href="@{'/albumDetail/' + ${album.id} + '/' +  ${pageInfo.pageNum + 1}+'/'}" ><i class="fa fa-angle-right"></i></a>
                    </span>
                </div>
            </div>
        </div>
        <script>
            let pageContainer = document.getElementById("wrap");
            let playBtnList = document.getElementsByClassName("play-btn");
            for (let i = 0; i < playBtnList.length; i++) {
                let playBtn = playBtnList[i];
                let url = playBtn.dataset.url;
                playBtn.addEventListener("click", function (e) {
                    e.stopPropagation();
                    let videoMask = document.createElement("div");
                    videoMask.setAttribute("class", "video-mask");
                    pageContainer.appendChild(videoMask);
                    let video = document.createElement("video");
                    video.setAttribute("src", url);
                    video.setAttribute("class", "video-self");
                    video.setAttribute("controls", "controls");
                    video.setAttribute("autoplay", "autoplay");
                    videoMask.appendChild(video);
                    let close = document.createElement("div");
                    close.setAttribute("class", "video-close");
                    close.setAttribute("title", "关闭");
                    close.innerHTML = "x"
                    videoMask.appendChild(close);
                    close.addEventListener("click", function() {
                        pageContainer.removeChild(videoMask);
                    });
                });
            }
        </script>
    </div>

    <div th:replace="~{theme/wuxia/common :: footer}"></div>
</div>
<div th:replace="~{theme/wuxia/common :: script}"></div>
</body>
</html>
